<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
>
<head>
    <!-- 设置页面的 基本路径，页面所有资源引入和页面的跳转全部基于 base路径 -->
    <base th:href="${#request.getContextPath()}+'/'">
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="Bookmark" href="/favicon.ico">
    <link rel="Shortcut Icon" href="/favicon.ico"/>

    <script type="text/javascript" th:src="@{/lib/html5shiv.js}"></script>
    <script type="text/javascript" th:src="@{/lib/respond.min.js}"></script>
    <link rel="stylesheet" type="text/css" th:href="@{/h-ui/css/H-ui.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/h-ui.admin/css/H-ui.admin.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/lib/Hui-iconfont/1.0.8/iconfont.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/h-ui.admin/skin/default/skin.css}" id="skin"/>
    <link rel="stylesheet" type="text/css" th:href="@{/h-ui.admin/css/style.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/lib/bootstrap/css/bootstrap.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/lib/bootstrap-table/bootstrap-table.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/lib/font-awesome-4.7.0/css/font-awesome.min.css}"/>

    <script type="text/javascript" th:src="@{/lib/DD_belatedPNG_0.0.8a-min.js}"></script>
    <script>DD_belatedPNG.fix('*');</script>

    <style>
        #patient-bottom div {
            float: left;
            width: 50%;
            line-height: 40px;
            text-align: center;
        }
    </style>

</head>
<body>
<div class="page-container" style="padding: 0 20px">
    <div id="operateDiv" style="display: none;">
        <a href="javascript:;" id="check" value="" onclick="checkPatient(this)"><i class="fa fa-check"></i></a>
    </div>
    <div id="operateDiv2" style="display: none;">
        <a href="javascript:;"  value="" onclick="checkRegistered(this)"><i class="fa fa-check"></i></a>
    </div>
    <div style="height:100%;">
        <div id="patient-bottom">
            <div id="registered" style="background-color: #00b7ee;cursor: pointer" onclick="changeRegistered()">
                挂号列表
            </div>
            <div id="patients" style="background-color:rgb(229, 229, 229);cursor: pointer"
                 onclick="changePatients()"> 患者档案
            </div>
        </div>
        <div id="patient-bottom-table" >

            <div id="dataTable-registered-div" >
                <table  id="dataTable-registered" class="table table-border table-bordered table-bg">
                </table>
            </div>
            <div id="dataTable-patients-div" style="display: none">
                <table  id="dataTable-patients"
                       class="table table-border table-bordered table-bg">
                </table>
            </div>

        </div>
    </div>

</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" th:src="@{/lib/jquery/1.11.3/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/lib/layer/2.4/layer.js}"></script>
<script type="text/javascript" th:src="@{/h-ui/js/H-ui.min.js}"></script>
<script type="text/javascript" th:src="@{/h-ui.admin/js/H-ui.admin.js}"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" th:src="@{/lib/My97DatePicker/4.8/WdatePicker.js}"></script>
<script type="text/javascript" th:src="@{/lib/datatables/1.10.0/jquery.dataTables.min.js}"></script>
<script type="text/javascript" th:src="@{/lib/bootstrap-table/bootstrap-table.js}"></script>
<script type="text/javascript" th:src="@{/lib/bootstrap-table/bootstrap-table-zh-CN.min.js}"></script>


<script type="text/javascript">
    $(function () {
        $('#dataTable-patients').bootstrapTable({
            url: 'patients/list',//ajax请求的url地址
            pagination: true,
            toolbar: "#toolbar",//顶部显示的工具条（添加和批量删除的）
            contentType: 'application/x-www-form-urlencoded',//条件搜索的时候ajax请求给后台数据的数据类型（条件搜索post提交必须设置）
            search: true,//是否显示搜索框
            pageNumber: 1,//默认的页面 第一页
            pageSize: 7,//默认的每页条数
            sidePagination: "server",
            paginationHAlign: 'right', //底部分页条
            columns: [ //表格显示数据对应的表头设置，
                {field: 'patientsName', title: '患者姓名'},
                {field: 'patientsAge', title: '年龄'},
                {field: 'patientsGender', title: '性别'},
                {field: 'patientsPhone', title: '电话'},
                {field: 'updateTime', title: '更新日期'},
                /*
                formatter: 格式化这一行，回调一个函数
                */
                {
                    field: 'patientsId',
                    title: '操作',
                    align: 'center',
                    formatter: getOperateBtns

                }],
            queryParams: function (params) {
                //此方法在用户分页或者搜索的时候回自动发送ajax请求调用，并把对应的参数传递给后台
                return {
                    pageNum: params.offset / params.limit + 1, //页码
                    pageSize: params.limit, //页面大小
                    keyword: params.search
                };
            }
        });


        $('#dataTable-registered').bootstrapTable({
            url: 'newVisit/list',//ajax请求的url地址
            pagination: true,
            toolbar: "#toolbar",//顶部显示的工具条（添加和批量删除的）
            contentType: 'application/x-www-form-urlencoded',//条件搜索的时候ajax请求给后台数据的数据类型（条件搜索post提交必须设置）
            search: true,//是否显示搜索框
            pageNumber: 1,//默认的页面 第一页
            pageSize: 7,//默认的每页条数
            sidePagination: "server",
            paginationHAlign: 'right', //底部分页条
            columns: [
                {
                    field: 'patient_name',
                    title: '患者姓名'
                },
                {
                    field: 'patients_gender',
                    title: '性别'
                },
                {
                    field: 'patients_age',
                    title: '年龄'
                },
                {
                    field: 'patients_phone',
                    title: '电话'
                },
                {
                    field: 'registered_time',
                    title: '挂号时间'
                },
                {
                    field: 'registration_type',
                    title: '挂号类型'
                },
                {
                    field: 'registered_id',
                    title: '操作',
                    align: 'center',
                    //格式化列
                    formatter: getOperateBtn
                }
            ],
            queryParams: function (params) {
                //此方法在用户分页或者搜索的时候回自动发送ajax请求调用，并把对应的参数传递给后台
                return {
                    pageNum: params.offset / params.limit + 1, //页码
                    pageSize: params.limit, //页面大小
                    keyword: params.search
                };
            }
        });


    });

    //患者库获取数据
    function getOperateBtns(value, row, index) {
        var html = "";
        $("#operateDiv").find("a").each(function () {
            var myA = $(this).clone()
            myA.attr("value", row.patientsId)
            html += myA.prop("outerHTML") + "&nbsp;&nbsp;&nbsp;&nbsp;";
        });
        return html;
    }
    //挂号列表获取数据
    function getOperateBtn(value, row, index) {
        var html = "";
        $("#operateDiv2").find("a").each(function () {
            var myA = $(this).clone()
            myA.attr("value",value)
            html += myA.prop("outerHTML") + "&nbsp;&nbsp;&nbsp;&nbsp;";
        });
        return html;
    }

</script>


<!--业务-->
<script type="text/javascript">

    function changeRegistered() {
        $("#dataTable-registered-div").attr("style", "display:block;")
        $("#patients").attr("style", "background-color:rgb(229, 229, 229);cursor: pointer")
        $("#dataTable-patients-div").attr("style", "display:none;")
        $("#registered").attr("style", "background-color: #00b7ee;cursor: pointer")
    }

    function changePatients() {
        $("#dataTable-registered-div").attr("style", "display:none;")
        $("#patients").attr("style", "background-color: #00b7ee;cursor: pointer")
        $("#dataTable-patients-div").attr("style", "display:block;")
        $("#registered").attr("style", "background-color:rgb(229, 229, 229);cursor: pointer")
    }

    function checkPatient(object) {
        var checkPatientId = $(object).attr("value")

        $.get("newVisit/choosePatinet", {checkPatientId:checkPatientId},function (data) {
            layer.msg(data.msg,{time:1000},function () {
                parent.refresh()
                parent.layer.closeAll()
            })
          })

    }
    function checkRegistered(object) {
        var checkRegisteredId = $(object).attr("value")

        $.get("newVisit/chooseRegistered", {checkRegisteredId:checkRegisteredId},function (data) {
            layer.msg(data.msg,{time:1000},function () {
                parent.refresh()
                parent.layer.closeAll()
            })
          })

    }




</script>
</body>
</html>
